<template>
<div>
  <Header></Header>

  <div class="mblog">
    <h2> {{ blog.title }}</h2>
    <el-link icon="el-icon-edit" v-if="ownBlog">
      <router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}" class="m_link" >
        编辑
      </router-link>
    </el-link>
    <div class="m_dele" >
<!--      <el-button @click="delete1(blog)" type="text" size="small" v-if="ownBlog" icon="el-icon-delete">-->
<!--        删除</el-button>-->
      <el-button type="danger" icon="el-icon-delete" circle v-if="ownBlog" @click="delete1(blog)"  size="small">

      </el-button>
    </div>
    <el-divider></el-divider>
    <div class="markdown-body" v-html="blog.content"></div>



  </div>

</div>
</template>

<script>
import 'github-markdown-css'
import Header from "../components/Header";

export default {
  name: "BlogDetail",
  components: {Header},
  data() {
    return {
      blog: {
        id: "",
        title: "",
        content: ""
      },
      ownBlog: false
    }
  },
  created() {
    const blogId = this.$route.params.blogId
    console.log(blogId)
    const _this = this
    this.$axios.get('/blogs/' + blogId).then(res => {
      const blog = res.data.data
      console.log(blog)
      _this.blog.id = blog.id
      _this.blog.title = blog.title
      var MardownIt = require("markdown-it")
      var md = new MardownIt()
      var result = md.render(blog.content)
      _this.blog.content = result
      /*只有博客主人才能看到编辑按钮*/
      _this.ownBlog = (blog.userId === _this.$store.getters.getUser.id)
    })
  },
  methods: {
    delete1(blog){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const _this=this
          this.$axios.delete('http://localhost:8081/blogs/dele'+blog.id,{
            headers: {
              "Authorization": localStorage.getItem("token")
            }
          }).then(res => {
            if (res.data.msg==="删除成功" ){
            _this.$message({
              type: 'success',
              message: '当前博客:'+blog.title+'删除成功！',
            });
             _this.$router.push("/blogs")
           }
            // _this.$alert('当前博客:'+blog.id+'删除成功！', '提示', {
            //           confirmButtonText: '确定',
            //           callback: action => {
            //             // _this.$router.push('/findAll')
            //             _this.$router.push("/blogs")
            //           }
            //         });

          })
          // this.$message({
          //   type: 'success',
          //   message: '当前博客:'+blog.id+'删除成功！'
          // });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      // const _this=this
      // this.$axios.delete('http://localhost:8081/blogs/dele'+blog.id,{
      //   headers: {
      //     "Authorization": localStorage.getItem("token")
      //   }
      // }).then(function (response) {
      //       // alert(1111)
      //       _this.$alert('当前博客:'+blog.id+'删除成功！', '提示', {
      //         confirmButtonText: '确定',
      //         callback: action => {
      //           // _this.$router.push('/findAll')
      //           _this.$router.push("/blogs")
      //         }
      //       });
      //     })
    },
  }
}
</script>

<style scoped>
    .mblog {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      width: 100%;
      min-height: 700px;
      padding: 20px 15px;
    }
    .m_link{
      text-decoration: none;
    }
    .m_dele{
      text-align: end;
      margin-top: -30px;
    }
</style>
